

<template>
  <div class="min-height">
    <div class="top_parent">
      <img src="../../assets/image/wenchuang/wenchuang_banner.png" style="width:100%" alt />
      <div class="bread">
        <p>
          <router-link to="/">首页</router-link>》 文创
        </p>
      </div>
    </div>

    <div class="book">
      <ul>
        <li>
          <img src="../../assets/image/wenchuang/1.png" alt />
        </li>
        <li>
          <p>合惜·胡桃木果盒</p>
        </li>
        <li>
          <p>瓶安·黑胡桃杯垫</p>
        </li>
        <li>
          <img src="../../assets/image/wenchuang/2.png" alt />
        </li>
      </ul>
      <div class="two">
        <p>
          <span>清音·墨竹伞</span>
        </p>
      </div>
      <div class="three">
        <div>
          <img src="../../assets/image/wenchuang/4.png" alt />
          <p>石竹心语·桐木签字笔</p>
        </div>
        <div>
          <img src="../../assets/image/wenchuang/5.png" alt />
          <p>龙茗·陶瓷马克杯</p>
        </div>
      </div>
      <div class="four">
        <div>
          <!-- <div>
            <img src="../../assets/image/wenchuang/6.png" alt />
            <p>清乾隆铜胎雕漆葫芦</p>
            <p>瓶(文物)</p>
          </div>-->
          <div>
            <img src="../../assets/image/wenchuang/8.png" alt />
            <p>溢像·檀木熏香器</p>
          </div>
        </div>
        <!-- <div>
          <div>
            <img src="../../assets/image/wenchuang/7.png" alt />
            <p>清雕竹节纹葫芦底寿</p>
            <p>山石印</p>
          </div>
          <div>
            <img src="../../assets/image/wenchuang/9.png" alt />

            <p>清厉志墨竹轴横披</p>
          </div>
        </div>-->
      </div>

      <!-- <div class="five">
        <img src="../../assets/image/wenchuang/10.png" alt />

        <p>明代荷叶螭虎纹犀角杯</p>
      </div>-->
    </div>
    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";
export default {
  data() {
    return {};
  },
  components: {
    foot2: foot2,
  },

  methods: {},
};
</script>
<style scoped>
.min-height {
  min-height: 600px;
  background: #f2f2f2;
}
a {
  text-decoration: none;
  color: #6e6e6e;
}

ul,
li,
p {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}
.top_parent .bread2 {
  max-width: 1200px;
  margin: auto;
}
.top_parent span {
  position: absolute;
  bottom: 20px;
  display: inline-block;
  width: 200px;
  height: 35px;
  right: 180px;
  cursor: pointer;
  color: #6e6e6e;
}
.bg_pic {
  width: 100%;
}
.book {
  width: 1200px;
  margin: auto;

  margin-bottom: 80px;
  margin-top: 40px;
}
.book > ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 130px;
}

.book > ul > li {
  width: 600px;
  height: 360px;
}
.book > ul > li:nth-child(2),
.book > ul > li:nth-child(3) {
  background: #465462;
  color: white;
  font-size: 46px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.book .two {
  box-sizing: border-box;
  padding-top: 50px;
  font-size: 46px;
  padding-left: 40px;
  width: 1200px;
  height: 430px;
  background: url("../../assets/image/wenchuang/3.png") no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 130px;
}
.book .three {
  display: flex;
  height: 600px;
  margin-bottom: 100px;
  font-size: 46px;
}
.book .three div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.book .three div p,
.book .five p {
  margin-top: 34px;
  margin-bottom: 100px;
  font-size: 46px;
}
.book .four > div > div p {
  margin-top: 34px;
  font-size: 46px;
  margin-bottom: 60px;
}
.book .three > div:nth-child(2) {
  align-self: flex-end;
}
.book .four {
  display: flex;
  max-width: 1200px;
  justify-content: space-around;
  height: 970px;
}

.book .four > div:nth-child(2) {
  align-self: flex-end;
}
.book .four > div > div {
  text-align: center;
}
.book .five {
  text-align: center;
}
</style>